<template>
	<view class="mission-detail">
		<myHeader title="任务详情" showBack></myHeader>
		<view class="mission-detail-body">
			<view class="body-item">
				<view class="title">{{ detailObj.title }}</view>
				<view class="tag1">
					<text class="urgent-box" style="background: rgba(201, 84, 65, 1)" v-if="detailObj.urgent">加急</text>
					<text class="expected-box">截止时间:{{
              formatDate(detailObj.expectedDate, "YYYY-MM-DD")
            }}</text>
				</view>
				<view style="margin-bottom: 16rpx">
					<text class="time">{{
            formatDate(detailObj.createTime, "MM-DD HH:mm")
          }}</text>
					<text class="number" style="margin-left: 16px;">
						已有
						<text style="color: #339eff;font-weight: bold;">{{ detailObj.expertCount }}</text>位专家回答
					</text>
				</view>
				<view class="price">
					<text>¥{{ detailObj.reward / 100 }}</text>
				</view>
				<view class="person-info-wrap">
					<view class="head-box">
						<img :src="detailObj.avatar" alt="" />
					</view>
					<view class="info-box">
						<view class="name">
							<text>{{ detailObj.nickname }}</text>
							<text>{{
                formatDate(detailObj.birthday, "YYYY-MM-DD HH:mm:ss")
              }}</text>
						</view>
						<view class="tag">
							<text>{{
                detailObj.sex == 1 ? "男" : detailObj.sex == 2 ? "女" : "未知"
              }}</text>
							<text>{{ calculateAge(detailObj.birthday) }}</text>
							<text>{{ detailObj.height }}cm</text>
							<text>{{ detailObj.weight }}kg</text>
							<text>{{ calcAddress(detailObj.detailAddress) }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="body-item">
				<view class="description">
					{{ detailObj.description }}
				</view>
				<view class="img-box">
					<image v-for="(citem, cindex) in detailObj.imageUrl" :key="cindex" :src="citem" mode="widthFix"
						alt=""></image>
				</view>
				<view class="content-title" v-if="commentList1.length != 0">
					阶段反馈
				</view>
				<view v-for="(item, index) in commentList1" :key="index">
					<view class="content">{{ item.content }}</view>
					<view class="img-box">
						<image v-for="(citem, cindex) in item.imageUrl.split(',')" :key="cindex" :src="citem"
							mode="widthFix" alt=""></image>
					</view>
				</view>
				<view class="content-title" v-if="commentList2.length != 0">
					结单评价
				</view>
				<view v-for="(item, index) in commentList2" :key="index">
					<view class="content">{{ item.content }}</view>
					<view class="img-box">
						<image v-for="(citem, cindex) in item.imageUrl.split(',')" :key="cindex" :src="citem"
							mode="widthFix" alt=""></image>
					</view>
				</view>
				<div v-if="
            userInfo.id &&
            userInfo.id == detailObj.publisher &&
            detailObj.status == 3
          ">
					<u-button type="primary" @click="evaluate"> 评价 </u-button>
				</div>
			</view>
			<view class="body-item">
				<view class="content-title">调查问卷</view>
				<view v-for="(item, index) in detailObj.survey" :key="index">
					<view class="answer-name">{{ item.title }}</view>
					<view class="answer-content">回答: {{ item.pitch }}</view>
				</view>
			</view>
			<view class="body-item">
				<view class="content-title">出方案的专家</view>
				<view class="plan-info-wrap" v-for="(item, index) in planList" :key="index">
					<view class="btn-box">
						<u-button type="primary" @click="pinjia(item)"
							v-if="userInfo.evaluate && userInfo.id != item.receiverId">评价</u-button>
					</view>
					<view class="head-box-wrap">
						<view class="head-box">
							<img :src="item.avatar" alt="" />
						</view>
						<view class="info-box">
							<view class="name">
								<text>{{ item.receiverName }}</text>
								<text v-if="item.status == 2">指定的接单人</text>
							</view>
							<view style="color: #333; font-size: 28rpx; margin-top: 12rpx">
								<text> 擅长领域: {{ item.skilledIn }}</text>
							</view>
							<view class="tag" style="margin-top: 12rpx">
								<text v-for="(citem, cindex) in item.tagNames" :key="cindex">{{
                  citem
                }}</text>
							</view>
							<view class="start-box" style="
                  margin-top: 12rpx;
                  font-size: 28rpx;
                  color: #333;
                  display: flex;
                  align-items: center;
                ">
								<u-icon name="star-fill" color="rgba(255, 170, 34, 1)" size="28rpx"></u-icon>
								<text style="margin-left: 12rpx">
									综合评分 {{ item.score || 0 }}</text>
							</view>
						</view>
					</view>
					<view class="plan-content">{{ item.context }}</view>
				</view>
			</view>
		</view>
		<u-popup mode="center" :show="showPinjia">
			<view class="pinjia-warp">
				<view style="margin-bottom: 20rpx">评分</view>
				<u-rate size="40" inactiveColor="#FFAA22" :count="5" v-model="score" :allowHalf="true"></u-rate>
				<view style="margin: 20rpx 0">评价内容</view>
				<u--textarea v-model="pinjiaContent" placeholder="请输入内容"></u--textarea>
				<div style="
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
          ">
					<div style="width: 40%">
						<u-button @click="showPinjia = false">取消</u-button>
					</div>
					<div style="width: 40%">
						<u-button type="primary" @click="evaluatePlan">确定</u-button>
					</div>
				</div>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showEvaluate">
			<view class="pinjia-warp">
				<view style="margin-bottom: 20rpx">评分</view>
				<u-radio-group v-model="evaluateType" size="30" iconSize="30" placement="row">
					<u-radio labelSize="30" activeColor="#409eff" label="阶段反馈" name="阶段反馈"></u-radio>
					<u-radio labelSize="30" activeColor="#409eff" label="结单评价" name="结单评价"></u-radio>
				</u-radio-group>
				<view style="margin: 20rpx 0">复检报告</view>
				<u-upload width="200" height="200" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
					name="uoload2" multiple :maxCount="2"></u-upload>
				<view style="margin: 20rpx 0">评价内容</view>
				<u--textarea v-model="evaluateContent" placeholder="请输入内容"></u--textarea>
				<div style="
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
          ">
					<div style="width: 40%">
						<u-button @click="showEvaluate = false">取消</u-button>
					</div>
					<div style="width: 40%">
						<u-button type="primary" @click="evaluateComment">确定</u-button>
					</div>
				</div>
			</view>
		</u-popup>
		<!-- 新增：增加悬赏弹出层 -->
		<u-popup mode="center" :show="showAddReward" round="16" overlay="rgba(0,0,0,0.5)">
			<view class="add-reward-wrap">
				<view class="reward-header">增加悬赏</view>
				<view class="reward-input-wrap">
					<u-input v-model="rewardAmount" placeholder="请输入悬赏金额（元）" type="number" maxlength="8"
						@input="onRewardInput" />
					<text class="unit">元</text>
				</view>
				<view class="reward-tip" v-if="errorMessage">
					<text style="color: #ff4d4f">{{ errorMessage }}</text>
				</view>
				<view class="reward-btn-group">
					<u-button class="cancel-btn" @click="showAddReward = false">取消</u-button>
					<u-button class="confirm-btn" type="primary" @click="confirmAddReward">确认</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 新增：提交方案弹出层 -->
		<u-popup mode="center" :show="showAddScheme" round="16" overlay="rgba(0,0,0,0.5)">
			<view class="add-reward-wrap">
				<view class="reward-header">我的方案</view>
				<view class="reward-input-wrap">
					<textarea v-model="schemeContext" placeholder="请输入您的治疗方案" maxlength="-1" />
				</view>
				<view class="reward-btn-group">
					<u-button class="cancel-btn" @click="showAddScheme = false">取消</u-button>
					<u-button class="confirm-btn" type="primary" @click="confirmAddScheme">确认</u-button>
				</view>
			</view>
		</u-popup>

		<div class="page-footer">
			<div style="display: flex; justify-content: center;align-items: center;">
				<u-button type="primary" @click="settlement"
					v-if="userInfo.id && userInfo.id == detailObj.publisher && detailObj.status == 0">去支付</u-button>
				<u-button type="primary" @click="settlement"
					v-if="userInfo.id && userInfo.id == detailObj.publisher && detailObj.status == 3&& !detailObj.settled">支付尾款</u-button>
				<u-button type="primary" @click="showAddRewardPopup"
					v-if="userInfo.id && userInfo.id == detailObj.publisher && detailObj.status == 2">增加悬赏</u-button>
				<u-button type="primary" @click="showAddSchemePopup"
					v-if="isExpert && userInfo.id && userInfo.id != detailObj.publisher">提交方案</u-button>
			</div>
		</div>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		getMissionDeatail,
		getMissionComment,
		getPlan,
		evaluatePlan,
		evaluateTask,
		addRewardOrder,
		createOrder,
		prepay,
		createScheme
	} from "@/api";
	import {
		calculateAge,
		formatDate
	} from "@/utils/util";
	export default {
		components: {
			myHeader,
		},
		data() {
			return {
				id: "",
				detailObj: {},
				commentList1: [],
				commentList2: [],
				planList: [],
				page: {
					pageNo: 1,
					pageSize: 4,
					total: 0,
				},
				pinjiaContent: "",
				score: 0,
				showPinjia: false,
				showEvaluate: false,
				evaluateType: "阶段反馈",
				fileList: [],
				evaluateContent: "",
				// 新增：悬赏相关变量
				showAddReward: false, // 控制悬赏弹出层显示
				rewardAmount: '', // 输入的悬赏金额
				errorMessage: '', // 错误提示信息
				// 新增：治疗方案相关变量
				showAddScheme: false, // 控制悬赏弹出层显示
				schemeContext: '', // 输入的悬赏金额
			};
		},
		computed: {
			userInfo() {
				return uni.getStorageSync("userInfo");
			},
			isExpert() {
				let userInfo = this.userInfo;
				if (userInfo && userInfo.groupIds) {
					let groupIds = userInfo.groupIds;
					// 如果包含1-普通用户
					// 如果包含2-推广者
					// 如果包含3-专家
					if (groupIds.includes(3)) {
						return true;
					}
				}
				return false;
			},
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
			this.getComment1();
			this.getComment2();
			this.getPlan();
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				setTimeout(() => {
					console.log(this.fileList);
				}, 1000);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "https://www.rebirthealth.com/app-api/infra/file/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								let data = JSON.parse(res.data);
								resolve(data.data);
							}, 1000);
						},
					});
				});
			},
			evaluate() {
				this.showEvaluate = true;
				this.evaluateType = "阶段反馈";
				this.fileList = [];
				this.evaluateContent = "";
			},
			async evaluateComment() {
				let res = await evaluateTask({
					taskId: this.detailObj.id,
					type: this.evaluateType === "阶段反馈" ? "1" : "2",
					content: this.evaluateContent,
					imageUrl: this.fileList.map((c) => c.url).join(","),
				});
				this.showEvaluate = false;
				if (this.evaluateContent === "阶段反馈") {
					this.getComment2();
				} else {
					this.getComment1();
				}
			},
			pinjia(item) {
				this.acPin = item;
				this.showPinjia = true;
				this.pinjiaContent = "";
				this.score = 0;
			},
			async evaluatePlan() {
				let res = await evaluatePlan({
					schemeId: this.acPin.id,
					score: this.score,
					content: this.pinjiaContent,
				});
				this.showPinjia = false;
			},
			onReachBottom() {
				if (this.page.total <= this.planList.length) {
					return;
				}
				this.page.pageSize += 4;
				this.getPlan();
			},
			async getPlan() {
				// 出方案的专家
				let res = await getPlan({
					taskId: this.id,
					status: 3,
					pageNo: this.page.pageNo,
					pageSize: this.page.pageSize,
				});
				this.planList = res.list;
				this.page.total = res.total;
			},
			async getComment1() {
				// 阶段反馈
				let res = await getMissionComment({
					taskId: this.id,
					type: 1,
					pageNo: 1,
					pageSize: 10,
				});
				this.commentList1 = res.list;
			},
			async getComment2() {
				// 结单评价
				let res = await getMissionComment({
					taskId: this.id,
					type: 2,
					pageNo: 1,
					pageSize: 10,
				});
				this.commentList2 = res.list;
			},
			async getDetail() {
				this.detailObj = await getMissionDeatail({
					id: this.id,
				});
				this.detailObj.survey.forEach((survey) => {
					if (survey.type == 1) {
						survey.value = JSON.parse(survey.value);
						let item = survey.value.find((c) => c.value == survey.pitch);
						survey.pitch = item.label;
					}
					if (survey.type == 2) {
						survey.value = JSON.parse(survey.value);
						let item = survey.value.find((c) => c.value == survey.pitch);
						survey.pitch = item.label;
					}
					if (survey.type == 3) {
						survey.value = JSON.parse(survey.value);
						survey.pitch = survey.pitch.split(",");
						let item = survey.value.find((c) => c.value == survey.pitch);
						let pitch = "";
						survey.value.forEach((c) => {
							if (survey.pitch.includes(c.value)) {
								pitch = pitch ? pitch + "," + c.label : c.label;
							}
						});
						survey.pitch = pitch;
					}
				});
			},
			calculateAge(time) {
				return calculateAge(time);
			},
			calcAddress(addr) {
				let i = addr ? addr.indexOf(" ") : -1;
				if (i == 0 || i == -1) {
					return "未知";
				} else {
					return addr.slice(0, i);
				}
			},
			formatDate(time, format) {
				return formatDate(time, format);
			},

			// 新增：显示悬赏弹出层
			showAddRewardPopup() {
				this.showAddReward = true;
				this.rewardAmount = ''; // 清空输入
				this.errorMessage = ''; // 清空错误提示
			},

			// 新增：显示悬赏弹出层
			showAddSchemePopup() {
				this.showAddScheme = true;
				this.schemeContext = ''; // 清空输入
			},

			// 新增：输入金额时验证
			onRewardInput(e) {
				const value = e.trim();
				// 验证规则：正整数或两位小数，不超过99999元
				const reg = /^\d+(\.\d{1,2})?$/;
				if (value && !reg.test(value)) {
					this.errorMessage = '请输入有效的金额（最多两位小数）';
				} else {
					this.errorMessage = '';
				}
			},
			// ====================== 新增：输入验证方法 ======================
			/**
			 * 验证悬赏金额输入有效性
			 */
			validateRewardInput() {
				const value = this.rewardAmount.trim();
				if (!value) {
					return {
						isValid: false,
						message: '请输入悬赏金额'
					};
				}
				if (!/^\d+(\.\d{1,2})?$/.test(value)) {
					return {
						isValid: false,
						message: '请输入有效的金额（最多两位小数）'
					};
				}
				const amount = parseFloat(value);
				if (amount <= 0) {
					return {
						isValid: false,
						message: '金额必须大于0'
					};
				}
				if (amount > 99999) {
					return {
						isValid: false,
						message: '金额不能超过99999元'
					};
				}
				return {
					isValid: true,
					message: ''
				};
			},

			// ====================== 优化：confirmAddReward 方法 ======================
			/**
			 * 确认增加悬赏
			 */
			async confirmAddReward() {
				// 1. 输入验证
				const validation = this.validateRewardInput();
				if (!validation.isValid) {
					uni.showToast({
						title: validation.message,
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 2. 防止重复提交（添加 loading 状态）
				if (this.isAddingReward) return;
				this.isAddingReward = true;

				try {
					// 3. 调用后端创建悬赏订单接口
					const rewardAmountCent = parseFloat(this.rewardAmount) * 100; // 转换为分（根据后端要求调整）
					const orderId = await addRewardOrder({
						id: this.id,
						reward: rewardAmountCent
					});

					// 4. 调起微信支付（使用箭头函数保持 this 指向）
					const payConfig = await prepay(orderId);
					if (!payConfig) {
						uni.showToast({
							title: '支付订单创建失败',
							icon: 'none',
							duration: 2000
						});
						return;
					}

					// 5. 执行微信支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payConfig.timeStamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.packageValue,
						signType: payConfig.signType,
						paySign: payConfig.paySign,
						success: (res) => {
							console.log('支付成功，响应：', res); // 添加日志确认是否执行
							// 支付成功：关闭弹出层 + 刷新数据
							this.showAddReward = false;
							this.getDetail(); // 仅在成功时刷新
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1500
							});
						},
						fail: (err) => {
							// 支付失败/取消：显示提示，不刷新数据
							const errMsg = err.errMsg || '支付失败';
							if (errMsg.includes('cancel')) {
								uni.showToast({
									title: '支付已取消',
									icon: 'none',
									duration: 1500
								});
							} else {
								uni.showToast({
									title: `支付失败：${errMsg}`,
									icon: 'none',
									duration: 2000
								});
							}
						},
					});
				} catch (error) {
					// 6. 接口调用失败处理（如 addRewardOrder 或 prepay 失败）
					console.error('增加悬赏失败:', error);
					uni.showToast({
						title: '悬赏增加失败',
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 7. 重置提交状态（保持不变）
					this.isAddingReward = false;
				}
			},
			/**
			 * 支付尾款
			 */
			async settlement() {
				// 1. 防止重复提交（添加 loading 状态）
				if (this.isAddingReward) return;
				this.isAddingReward = true;

				try {
					// 2. 调用后端创建支付订单接口
					const rewardAmountCent = parseFloat(this.rewardAmount) * 100; // 转换为分（根据后端要求调整）
					const orderId = await createOrder(this.id);

					// 3. 调起微信支付（使用箭头函数保持 this 指向）
					const payConfig = await prepay(orderId);
					if (!payConfig) {
						uni.showToast({
							title: '支付订单创建失败',
							icon: 'none',
							duration: 2000
						});
						return;
					}

					// 4. 执行微信支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payConfig.timeStamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.packageValue,
						signType: payConfig.signType,
						paySign: payConfig.paySign,
						success: (res) => {
							console.log('支付成功，响应：', res); // 添加日志确认是否执行
							// 支付成功：关闭弹出层 + 刷新数据
							this.showAddReward = false;
							this.getDetail(); // 仅在成功时刷新
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1500
							});
						},
						fail: (err) => {
							// 支付失败/取消：显示提示，不刷新数据
							const errMsg = err.errMsg || '支付失败';
							if (errMsg.includes('cancel')) {
								uni.showToast({
									title: '支付已取消',
									icon: 'none',
									duration: 1500
								});
							} else {
								uni.showToast({
									title: `支付失败：${errMsg}`,
									icon: 'none',
									duration: 2000
								});
							}
						},
					});
				} catch (error) {
					// 5. 接口调用失败处理（如 addRewardOrder 或 prepay 失败）
					console.error('增加悬赏失败:', error);
					uni.showToast({
						title: '悬赏增加失败',
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 6. 重置提交状态（保持不变）
					this.isAddingReward = false;
				}
			},
			/* 
			 确认提交治疗方案
			 */
			async confirmAddScheme() {
				const res = await createScheme({
					taskId: this.id,
					title: '1',
					context: this.schemeContext
				})
				if (res) {
					await uni.showToast({
						title: '提交治疗方案成功',
						icon: 'none',
						duration: 2000,
					});
					this.showAddScheme = false;
					setTimeout(() => {
					  this.getDetail();
					}, 2000); // 延迟关闭弹窗，确保 toast 显示
				} else {
					uni.showToast({
						title: '提交治疗方案失败',
						icon: 'none',
						duration: 2000
					});
				}
			}
		},
	};
</script>

<style scoped lang="less">
	/* 新增：增加悬赏弹出层样式 */
	.add-reward-wrap {
		width: 600rpx;
		padding: 40rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;

		.reward-header {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 32rpx;
			text-align: center;
		}

		.reward-input-wrap {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.u-input {
				flex: 1;
				font-size: 32rpx;
				height: 80rpx;
				padding: 0 20rpx;
				border: 1rpx solid #e4e7ed;
				border-radius: 8rpx;
			}

			.unit {
				font-size: 32rpx;
				color: #666;
				margin-left: 16rpx;
			}
		}

		.reward-tip {
			height: 40rpx;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #ff4d4f;
		}

		.reward-btn-group {
			display: flex;
			justify-content: space-between;

			.cancel-btn {
				width: 48%;
				background: #f5f7fa;
				color: #606266;
			}

			.confirm-btn {
				width: 48%;
			}
		}
	}

	.mission-detail-body {
		background: rgba(19, 30, 50, 1);
		padding: 32rpx;
		padding-bottom: 200rpx;

		.body-item {
			padding: 32rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 16rpx;
			}

			.tag1 {
				margin-bottom: 16rpx;

				text {
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					margin-right: 16rpx;
					color: #fff;
					background: rgba(51, 158, 255, 1);
				}
			}

			.time {
				color: rgba(102, 102, 102, 1);
			}

			.number {
				color: rgba(51, 51, 51, 1);
			}

			.price {
				font-size: 44rpx;
				font-weight: bold;
				color: rgba(248, 92, 2, 1);
			}

			.person-info-wrap {
				width: 100%;
				height: 218rpx;
				background: rgba(66, 95, 155, 0.05);
				border-radius: 4rpx;
				border: 1rpx solid #dcdfe6;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 32rpx;
				box-sizing: border-box;

				.head-box {
					width: 96rpx;
					height: 96rpx;
					margin-right: 16rpx;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info-box {
					flex: 1;

					.name {
						display: flex;
						align-items: center;

						text:nth-child(1) {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 44rpx;
							letter-spacing: 2px;
							margin-right: 16rpx;
						}
					}

					.tag {
						text {
							line-height: 40rpx;
							font-size: 24rpx;
							color: #339eff;
							border: 1rpx solid #339eff;
							padding: 0 8rpx;
							margin-right: 8rpx;
						}
					}
				}
			}

			.plan-info-wrap {
				width: 100%;
				background: rgba(66, 95, 155, 0.05);
				border-radius: 4rpx;
				border: 1rpx solid #dcdfe6;
				padding: 32rpx;
				box-sizing: border-box;
				position: relative;

				.btn-box {
					position: absolute;
					right: 32rpx;
					top: 32rpx;
				}

				.head-box-wrap {
					display: flex;
					align-items: flex-start;
					justify-content: center;
					border-bottom: 1rpx solid #e4eaf1;
					padding-bottom: 32rpx;
				}

				.plan-content {
					padding-top: 32rpx;
				}

				.head-box {
					width: 96rpx;
					height: 96rpx;
					margin-right: 16rpx;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info-box {
					flex: 1;

					.name {
						display: flex;
						align-items: center;

						text:nth-child(1) {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 44rpx;
							letter-spacing: 2px;
							margin-right: 16rpx;
						}

						text:nth-child(2) {
							font-size: 28rpx;
							color: #fff;
							line-height: 40rpx;
							letter-spacing: 1px;
							background: #339eff;
							padding: 10rpx;
						}
					}

					.tag {
						text {
							line-height: 40rpx;
							font-size: 24rpx;
							color: #339646;
							border: 1rpx solid #339646;
							padding: 0 8rpx;
							margin-right: 8rpx;
						}
					}
				}
			}

			.img-box {
				display: flex;
				margin-bottom: 16rpx;

				image {
					width: 30%;
					margin-right: 30rpx;
				}
			}

			.content-title {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				line-height: 44px;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.answer-name {
				font-size: 28rpx;
				color: #999999;
			}

			.answer-content {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 34rpx;
			}
		}
	}

	.mission-detail {
		.pinjia-warp {
			width: 600rpx;
			padding: 32rpx;
		}

		/deep/ .u-textarea {
			border: 1rpx solid #f5f5f5;
		}
	}
</style>